<script setup>
defineProps({
	newsList: {
		type: Array,
		default: []
	}
})
	
const navToDetail = (id) => {
	uni.navigateTo({
		url: `/pages/notice/detail?id=${id}`
	})
}
</script>

<template>
	<view class="notice">
		<view class="icon">
			<uni-icons type="sound-filled" size="24" color="$uni-main-color"></uni-icons>
			<view class="title">公告</view>
		</view>
		<view class="text">
			<swiper class="swiper" circular autoplay :interval="2500" :duration="500" vertical>
					<swiper-item v-for="item in newsList" :key="item._id">
						<view class="swiper-item" @click="navToDetail(item._id)">{{ item.title }}</view>
					</swiper-item>
				</swiper>
		</view>
		<view class="arrow">
			<uni-icons type="right" size="16"></uni-icons>
		</view>
	</view>
</template>

<style scoped lang="scss">
.notice {
	display: flex;
	padding: 0 30rpx;
	background-color: #f9f9f9;
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 30rpx;
	margin: 0 25rpx;
	
	.icon {
		display: flex;
		justify-content: center;
		color: $uni-main-color;
	}
	
	.text {
		flex: 1;
		margin-left: 30rpx;
		color: $uni-color-subtitle;
		
		.swiper {
			height: 100%;
			
			.swiper-item {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
	
	.arrow {
		color: $uni-gray-2;
	}
}
</style>
